<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_元素溢出</title>
    <style>
        .txt{
            background-color: #ff0;
            width: 300px;
            /*以下三句代码是组合代码 缺一不可！*/
            white-space: nowrap;/*强制文本不换行*/
            overflow: hidden;/*溢出部分直接隐藏(裁掉)*/
            text-overflow: ellipsis;/*如果有溢出的文字替换为省略号*/
        }
        .over{
            background-color: lime;
            /*溢出前提：父容器有明确大小！*/
            width: 500px;
            height: 300px;
            overflow: visible;/*溢出可见 默认值*/
            overflow: hidden;/*溢出隐藏 多余的部分直接裁掉*/
            overflow: scroll;/*溢出显示拖拽条 无论是否溢出 两个方向都显示*/
            overflow: auto;/*自动显示拖拽条 只有溢出的方向才显示*/
        }
    </style>
</head>
<body>
    <div class="txt" title="回力（Warrior）运动裤子男2025秋季新款青少年校园户外300G重磅质感耐磨休闲裤B">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam animi asperiores atque beatae consequatur consequuntur delectus dicta dolorem doloribus ea earum eligendi esse eveniet expedita facilis fuga harum hic illum impedit incidunt ipsa ipsum laborum laudantium libero magnam maiores maxime molestiae mollitia nihil nisi nobis nostrum numquam obcaecati odio odit officia omnis optio pariatur perspiciatis placeat poss
    </div>
    <div class="over">
        <img src="img/1.png">
    </div>
</body>
</html>